<template>
  <div class="Page_DG_projectbug_cj">
    <t-mixed-view
      :ref="el => (Widget['mixedView'] = el)"
      style="opacity: 100%"
      class="dataGrid"
      :bordered_GridData="false"
      :enableCmdCol_GridData="true"
      :allowSort_GridData="true"
      :tabIndex="0"
      :optColumns="[
        {
          ID: 'ID',
          dataField: 'ID',
          caption: '主键ID',
          dataType: 'String',
          isShow: false,
          groupIndex: '',
          ExprExt: {},
          linkFormat: '',
          enumDisp: {},
          hintConf: {},
          expanded: true,
          RefSchemaExpr:
            'Schema.DQ.GetCDO_DO_do_projectbug_cj121801BasicList.Sources.DO_do_projectbug_cj121801.Columns.ID',
          ValueInfo_caption: {
            ShowValue: '主键ID',
            ReferenceExpr:
              'Schema.DQ.GetCDO_DO_do_projectbug_cj121801BasicList.Sources.DO_do_projectbug_cj121801.Columns.ID.Text',
            Type: 0,
          },
          ValueInfo_dataType: {
            ShowValue: 'String',
            ReferenceExpr:
              'Schema.DQ.GetCDO_DO_do_projectbug_cj121801BasicList.Sources.DO_do_projectbug_cj121801.Columns.ID.DataType',
            Type: 0,
          },
        },
        {
          ID: 'Code',
          dataField: 'Code',
          caption: '单据编号',
          dataType: 'String',
          isShow: true,
          groupIndex: '',
          ExprExt: {},
          linkFormat: '',
          enumDisp: {},
          hintConf: {},
          expanded: true,
          RefSchemaExpr:
            'Schema.DQ.GetCDO_DO_do_projectbug_cj121801BasicList.Sources.DO_do_projectbug_cj121801.Columns.Code',
          ValueInfo_caption: {
            ShowValue: '单据编号',
            ReferenceExpr:
              'Schema.DQ.GetCDO_DO_do_projectbug_cj121801BasicList.Sources.DO_do_projectbug_cj121801.Columns.Code.Text',
            Type: 0,
          },
          ValueInfo_dataType: {
            ShowValue: 'String',
            ReferenceExpr:
              'Schema.DQ.GetCDO_DO_do_projectbug_cj121801BasicList.Sources.DO_do_projectbug_cj121801.Columns.Code.DataType',
            Type: 0,
          },
        },
      ]"
      rowKey="ID"
      @click="(e)=>{alert(3)}"
      @row_click_GridData="(e)=>{alert(3)}"
      :rows_GridData="LocalVars.dataGrid_DataSource"
      :loading_GridData="LocalVars.dataGrid_Loading"
      :pageIndex_GridData="LocalVars.dataGrid_PageIndex"
      :pageSize_GridData="LocalVars.dataGrid_PageSize"
      :rowsNumber_GridData="LocalVars.dataGrid_Total"
      @request_GridData="dataGrid_Request"
      :optCmdColConfig_GridData="{
        columnConf: {
          width: 120,
          fixed: true,
          fixedPosition: 'left',
          caption: '操作',
          ValueInfo_caption:
            'Schema.Page.PageDGprojectbugcj.Controls.dataGrid.GridData.columnConf.caption',
        },
        commands: [],
      }"
      :cmdColClick_GridData="dataGrid_cmdColClick"
      :colCommandVisible_GridData="dataGrid_colCommandVisible"
    >
    </t-mixed-view>
  </div>
</template>

<script setup lang="ts">
  import {
    ref,
    onBeforeMount,
    onMounted,
    computed,
    onUnmounted,
    reactive,
    nextTick,
    watch,
  } from 'vue';

  const Widget = {
    mixedView: null,
  };

  interface LocalVariable {}
  const LocalVars = reactive<LocalVariable>({
    dataGrid_DataSource: [],
    dataGrid_PageIndex: 1,
    dataGrid_PageSize: 10,
    dataGrid_Total: 100,
    dataGrid_Loading: false,
  });
  class CtrlMethods {}
  const CtrlMethod = new CtrlMethods();
  async function Page_OnLoaded(e) {}
  async function Page_OnLoading(e) {}
  async function Page_OnError(e) {
    Funcs.HandleError(e);
  }
// async function dataGrid_OnRowClick(e) {
//   debugger;
//     // Widget.mixedView.gridInstance
//     alert('row-click')
// }
const dd= async  (e)=> {
  debugger;
    // Widget.mixedView.gridInstance
    alert('row-33333')
  }
const dataGrid_OnRowClick= async  (e)=> {
  debugger;
    // Widget.mixedView.gridInstance
    alert('row-click')
  }

  function fetchFromServer(_pagination, filter) {
    debugger;
    const { page, rowsPerPage, sortBy, descending, rowsNumber } = _pagination;
    const fetchCount = rowsPerPage === 0 ? rowsNumber : rowsPerPage;

    // calculate starting row of data
    const startRow = (page - 1) * rowsPerPage;

    fetch(
      `http://localhost:3004/users?_start=${startRow}&_limit=${fetchCount}`,
    ).then(response => {
      response.json().then(movies => {
        // rows.value = movies;
        // clear out existing data and add new

        LocalVars.dataGrid_DataSource.splice(
          0,
          LocalVars.dataGrid_DataSource.length,
          ...movies,
        );
        LocalVars.dataGrid_Total = 2001;
        LocalVars.dataGrid_PageIndex = page;
        LocalVars.dataGrid_PageSize = rowsPerPage;
        LocalVars.dataGrid_Loading = false;
      });
    });
  }
  async function dataGrid_Request(props) {
    debugger;
    LocalVars.dataGrid_Loading = true;
    const { page, rowsPerPage, rowsNumber } = props.pagination;
    setTimeout(() => {
      fetchFromServer(props.pagination, props.filter);
    }, 1500);
  }
  async function dataGrid_cmdColClick(cmdCol) {
    let colClicks = {};
    colClicks[cmdCol.text]();
  }
  function dataGrid_colCommandVisible(cmdCol) {
    let colVisibles = {};
    return colVisibles[cmdCol.text]();
  }
  onBeforeMount(() => {
    Page_OnLoading();
  });
  onMounted(async () => {
    await nextTick();
    var props = {
      pagination: {
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 100,
      },
    };
    dataGrid_Request(props);

    Page_OnLoaded();
  });
  onMounted(async () => {});
</script>

<style>
  .tr-label-prefix-wraper .tr-label-prefix {
    width: 100px;
  }
</style>
